<template>
  <div>
    <div class="banner-box">
      <img src="@/assets/image/login-banner.webp" class="banner" alt="" />
      <div class="banner-content">
        <p class="welcome">欢迎来到<span>BC.GAME</span></p>
        <p class="welcome-desc">现在就开始你的游戏之旅吧</p>
      </div>
    </div>

    <div class="form">
      <p class="title">登录</p>
      <div class="inp">
        <input type="text" v-model="phone" placeholder="电话号码" />
      </div>
      <div class="inp">
        <input type="password" v-model="code" placeholder="验证码" />
        <p @click="getCode">{{ codeText }}</p>
      </div>
      <button class="btn" @click="submit">登入</button>
      <p class="ts">bc.game 新手？<span @click="register">创建账户</span></p>
    </div>
  </div>
</template>
<script setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { sendCode, userRegister } from '@/api/index.js';
  import store from '@/store/index.js';

  let bok = true;
  let second = 60;
  const codeText = ref('获取验证码');
  const phone = ref('');
  const code = ref();
  const router = useRouter();
  const register = () => {
    router.push('/mobileRegister');
  };
  const getCode = async () => {
    if (!phone.value) {
      alert('请输入手机号');
      return false;
    }
    if (!bok) return false;
    const result = await sendCode({ phone: phone.value });
    bok = false;
    let timer = setInterval(() => {
      second--;

      codeText.value = `${second}秒后重试`;
      if (second <= 0) {
        bok = true;
        codeText.value = '重新获取';
        second = 60;
        clearInterval(timer);
      }
    }, 1000);
  };
  const submit = async () => {
    const result = await userRegister({
      code: code.value,
      mobile: phone.value,
    });
    store.dispatch('user/setToken', result.data.info.token);
    router.replace('/home');
  };
</script>
<style lang="scss" scoped>
  .banner-box {
    position: relative;
    .banner {
      display: block;
      width: 100%;
    }
    .banner-content {
      position: absolute;
      right: 1.5rem;
      bottom: 10%;
      .welcome {
        font-size: 1.125rem;
        line-height: 1.5rem;
        text-align: right;
        color: #fff;
        font-weight: 700;
        span {
          color: #3bc117;
        }
      }
      .welcome-desc {
        font-size: 0.75rem;
        line-height: 1rem;
        color: #999ca0;
        text-align: right;
      }
    }
  }
  .form {
    padding: 2rem;
    .title {
      color: #fff;
    }
    .inp {
      margin-top: 1.25rem;
      padding: 0 0.75rem;
      height: 2.875rem;
      border: 1px solid transparent;
      background: #1a1c20;
      border-radius: 0.25rem;
      display: flex;
      align-items: center;
      input {
        display: block;
        font-weight: 600;
        flex: 2;
        height: 100%;
        background: transparent;
        outline: none;
        border: none;
        color: #f5f6f7;
      }
      p {
        color: #fff;
      }
    }
    .edit {
      margin-top: 0.75rem;
      text-align: right;
      opacity: 0.9;
      color: #fff;
      line-height: 1rem;
      font-size: 0.75rem;
    }
    .btn {
      color: #fff;
      background-color: #1d803ab3;
      background-image: conic-gradient(from 1turn, rgba(88, 175, 16, 1), rgba(29, 128, 58, 1));
      height: 2.75rem;
      width: 100%;
      margin-top: 1.25rem;
    }
    .ts {
      margin-top: 1.25rem;
      color: #98a7b5;
      font-size: 0.875rem;
      span {
        font-size: 1rem;
        color: #3bc117;
        margin-left: 0.75rem;
      }
    }
  }
</style>
